﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" href="style/index.css">
</head>
<body class="bg-register">
    <div class="register-contain">
        <div class="register-header">
            <a href="javascript:back();"> < <span>注册</span> </a>
        </div>
        <div class="form-group">
            <div class="form-item">
                <input id="phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="form-item">
                <input id="nickName" type="text" placeholder="请输入昵称">
            </div>
            <div class="form-item">
                <input id="code" type="text" placeholder="请输入验证码">
                <button id="codeMessage">发送验证码</button>
            </div>
        </div>
        <div class="button-group">
            <button class="login-btn">注册</button>
        </div>
        <div class="authorization">
            <input type="checkbox">
            <span class="ml-5">注册使用即表示同意</span>
            <span class="protocol">用户协议及版权声明</span>
        </div>
        <div class="go-login">
            <a href="login.html">已经有账号？去登录</a>
        </div>
        <div class="tourism">
            <img src="image/tourism.png" alt="">
            <img src="image/tourism2.png" alt="">
            <img src="image/tourism3.png" alt="">
        </div>
    </div>
    <script src="js/index.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/core.util.js"></script>
    <script type="text/javascript" src="js/mlayer.min.js"></script>

    <script>
        $(function(){
            $(".login-btn").click(function(){
                var phone = $("#phone").val();
                var code = $("#code").val();
                var nickName = $("#nickName").val();
                if(CoreUtil.isEmpty(phone ,'小伙伴，手机号不能为空呦')) {
                    return;
                }
                if(CoreUtil.isEmpty(code,'小伙伴，验证码不能为空呦')) {
                    return;
                }
                if(CoreUtil.isEmpty(nickName,'小伙伴，验证码不能为空呦')) {
                    return;
                }
                CoreUtil.sendPost("/api/user/register", {"mobile":phone , "message" : code, "nickName" : nickName},function (res) {
                    mlayer.alert({
                        title: '消息',
                        content: '注册成功，请先去登陆',
                        btn:['不了', '好的'],
                        yes: function(index) {
                            location.href = "/login.html"
                            mlayer.close(index);
                        }
                    });
                });
            });

            var number = 60;
            $("#codeMessage").click(function() {
                var phone = $("#phone").val();
                if(CoreUtil.isEmpty(phone ,'小伙伴，手机号不能为空呦')) {
                    return;
                }

                CoreUtil.sendPost("/api/user/sendSms", {"mobile": phone , "template" : "877505"}, function (res) {
                    var id = setInterval(function(){
                        $("#codeMessage").html("倒计时" + number --);
                        if(number == 1) {
                            number = 60;
                            $("#codeMessage").removeAttr("disabled");
                            clearInterval(id);
                            $("#codeMessage").html("发送验证码");
                        }
                    }, 1000);
                    $(this).attr("disabled","disabled");
                });
            });
        })
    </script>
</body>
</html>
